<template>
	<div class="apply-message-content">
		<div class="apply-message-title">{{ !props.titleType ? '好友通知' : '群通知' }}</div>
		<!--    好友申请列表-->
		<div class="apply-message-list" v-if="friendNoagreeList.length && !props.titleType">
			<div class="apply-message-item" v-for="(item, index) in friendNoagreeList" :key="index">
				<div class="pic">
					<img :src="proxy.$baseUrl + item.friendId?.imgUrl" alt="" />
				</div>
				<div class="info">
					<div class="nick">{{ item.friendId?.nick }}</div>
					<div class="info-bottom">
						<div class="desc">{{ item.state ? '正在验证你的申请' : '请求添加为好友' }}</div>
						<div class="time">{{ utils.formatTime(new Date(item.time as string)) }}</div>
					</div>
				</div>
				<div class="apply-state" v-if="item.state === 0">等待验证</div>
				<div class="apply-state" v-else>
					<el-button size="small" @click="handleAgree(item.friendId._id)">同意</el-button>
					<el-button size="small" type="danger" @click="handleReject(item.friendId._id)">拒绝</el-button>
				</div>
			</div>
		</div>
		<div class="apply-message-list" v-else-if="groupNoagreeList.length && props.titleType">
			<div class="apply-message-item" v-for="(item, index) in groupNoagreeList" :key="index">
				<div class="pic">
					<img :src="proxy.$baseUrl + item.groupId?.imgUrl" alt="" />
				</div>
				<div class="info">
					<div class="nick">{{ item.groupId?.groupName }}</div>
					<div class="info-bottom">
						<div class="desc">{{ item.userId.nick + ' 申请加入你的群聊' }}</div>
						<div class="time">{{ utils.formatTime(new Date(item.time)) }}</div>
					</div>
				</div>
				<div class="apply-state">
					<el-button size="small" @click="handleAgree(item.groupId._id, item.userId._id)">同意</el-button>
					<el-button type="danger" size="small" @click="handleReject(item.groupId._id, item.userId._id)"
						>拒绝</el-button
					>
				</div>
			</div>
		</div>
		<div class="apply-message-list" v-else>
			<el-empty description="暂无申请消息" :image-size="200" />
		</div>
	</div>
</template>
<script setup lang="ts">
import utils from '@/utils'
import $bus from '@/utils/eventBus'
import { IFriendNoagree, IGroupNoagree } from '@/api/contact/type'
import { useUserInfoStore } from '@/store/modules/user'
import { reqAgreeFriend, reqAgreeGroup, reqGetFriendNoagreeList, reqGetGroupNoagreeList } from '@/api/contact'
import { useContactStore } from '@/store/modules/contact'

const { proxy } = getCurrentInstance()
const props = defineProps(['titleType'])
const userInfoStore = useUserInfoStore()
const contactStore = useContactStore()

// 好友申请列表
const friendNoagreeList = ref<IFriendNoagree[]>([])
// 获取好友申请列表
const getFriendNoagreeList = async () => {
	const res: any = await reqGetFriendNoagreeList(userInfoStore.userInfo._id)
	// 0:申请中(发送方)，1:已为好友，2:未加好友=>数据库没记录，3（前端用来判断是否是自己主页），4:申请方(接收方)
	if (res.code === 200) {
		friendNoagreeList.value = res.data
	}
}
// 群申请列表
const groupNoagreeList = ref<IGroupNoagree[]>([])

// 获取群聊申请列表
const getGroupNoagreeList = async () => {
	const res = await reqGetGroupNoagreeList(userInfoStore.userInfo._id)
	console.log('最新的群聊列表', res)
	if (res && res.code === 200) {
		groupNoagreeList.value = res.data
	}
}

// 同意
const handleAgree = async (id: string, userOtherId?: string) => {
	const userId = userInfoStore.userInfo._id
	const friendId = id
	const data = {
		userId,
		friendId
	}
	// 好友申请
	if (!props.titleType) {
		const res = await reqAgreeFriend(data)
		if (res && res.code === 200) {
			utils.msg(res.msg, 'success')
			// 刷新申请列表
			getFriendNoagreeList()
			// 刷新自己的好友列表
			$bus.emit('updateContactList', 0)
			// 刷新数量
			contactStore.updateContactNum(0)
			// 发送socket,通知申请人已经同意了
			proxy.socket.emit('agree_apply', userOtherId)
		} else {
			utils.msg(res.msg, 'error')
		}
	} else {
		console.log('群申请id', id, userOtherId)
		// 群申请
		const res = await reqAgreeGroup({ userOtherId, id })
		if (res && res.code === 200) {
			utils.msg(res.msg, 'success')
			// 刷新申请列表
			getGroupNoagreeList()
			// 群申请数量-1
			contactStore.updateContactNum(1)
			// 发送socket,通知申请人已经同意了
			proxy.socket.emit('agree_apply', userOtherId, id)
		}
	}
}
const handleReject = (id: string) => {}

watch(
	() => props.titleType,
	(val) => {
		console.log('获取好友申请列表', val)
		if (val == 0) {
			// 获取好友申请列表
			getFriendNoagreeList()
		} else {
			// 获取群申请列表
			getGroupNoagreeList()
		}
	}
)
</script>

<style scoped lang="scss">
.apply-message-content {
	width: 100%;
	height: 100%;
	background-color: var(--contact-apply-message-content-bg-color);
	display: flex;
	flex-direction: column;
	.apply-message-title {
		padding: 25px 20px;
		box-sizing: border-box;
		color: var(--contact-apply-message-group-color);
	}

	.apply-message-list {
		width: 100%;
		flex: 1;
		padding: 0 55px 10px;
		box-sizing: border-box;
		overflow: auto;

		.apply-message-item {
			width: 100%;
			height: 75px;
			background-color: var(--content-apply-message-item-bg-color);
			border-radius: 7.5px;
			margin-bottom: 15px;
			padding: 15px 25px;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.pic {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin: 0 10px;

				.info-bottom {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 13.5px;

					.desc {
						margin-right: 10px;
						color: #333333;
					}

					.time {
						color: #9b9b9b;
					}
				}
			}

			.apply-state {
				font-size: 13px;
				color: #999999;
			}
		}
	}
}
</style>
